<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>pie</title>
    <script th:src="@{/echart/echarts.js}"></script>
    <script th:src="@{/jquery/jquery-3.3.1.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.all.js}"></script>
</head>
<body>
<div style="position: absolute;">
    <div id="pie" style="width: 600px;height: 400px;"></div>
    <div style="position: relative; left: 600px;top: -250px;">
        <table id="demo"></table>
    </div>
</div>

<script>
    $.post("/getpie", function (res) {
        // 饼图
        var myChart = echarts.init(document.getElementById('pie'));
        option = {
            title: {
                text: '按bug等级统计',
                subtext: 'bug',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['1', '2', '3', '4']
            },
            series: [
                {
                    name: 'bug级别',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: res.pie,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        // 表数据
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#demo',
                width: 300,
                // height: 312,
                //数据接口
                data: res.buglist,
                //开启分页
                // page: true,
                // limits: [10, 50, 100],
                cols: [
                    [
                        {field: 'level', title: '严重程度', width: 96},
                        {field: 'count', title: '数量（个）', width: 100},
                        {field: 'proportion', title: '比列（%）', width: 100},
                    ]
                ]
            });
        });
    }, "json");


</script>
</body>
</html>